<template>
  <div>
    <!--图片-->
    <!--d-flex f-jc-c：display:flex; justify-content: center;-->
    <div class="d-flex f-jc-c" v-if="fileMessage.imgShow">
      <a-image width="200" :src="fileMessage.downloadUrl" />
    </div>

    <!--pdf-->
    <div v-else-if="fileMessage.pdfShow">
      <iframe
        height="100%"
        width="100%"
        scrolling="auto"
        :frameborder="0"
        class="child"
        :src="fileMessage.downloadUrl"
        :style="{ width: fileStyle.width, height: fileStyle.height }"
      >
      </iframe>
    </div>

    <!--doc，excel-->
    <div v-else-if="fileMessage.docShow">
      <!--Office Web 查看器 http://view.officeapps.live.com/op/view.aspx?src= -->
      <!-- XDOC文档预览云服务  只能免费使用几天，后续需要付费 https://view.xdocin.com/view?src=encodeURIComponent(fileMessage.downloadUrl)  -->
      <!-- kkFileView  http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(url))  -->
      <!-- :src="fileMessage.downloadUrl" -->
      <iframe
        height="100%"
        width="100%"
        scrolling="auto"
        :frameborder="0"
        class="child"
        :src="`https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(
          fileMessage.downloadUrl
        )}`"
        :style="{ width: fileStyle.width, height: fileStyle.height }"
      >
      </iframe>
    </div>

    <!--音频-->
    <div v-else-if="fileMessage.audioShow">
      <!-- loop="loop"  循环播放 -->
      <audio
        id="myaudio"
        :src="fileMessage.downloadUrl"
        controls="controls"
        preload="preload"
      >
        不支持audio标签
      </audio>
    </div>

    <!--视频-->
    <div class="d-flex f-jc-c" v-else-if="fileMessage.videoShow">
      <video preload="auto" align="center" controls="true">
        <source :src="fileMessage.downloadUrl" type="video/mp4" />
      </video>
    </div>

    <!--其他不能预览的-->
    <div v-else-if="fileMessage.otherShow"></div>
  </div>
</template>

<script lang="ts" setup>
// import Video from 'video.js';

// import 'video.js/dist/video-js.css';

// interface Props {
//   file: any;
// }

// interface Emits {
//   (event: 'downLoadFile', id: string | number): void;
// }

interface FileMessage {
  fileId: string | number;

  fileName: string;

  downloadUrl: string;

  imgShow: boolean;

  pdfShow: boolean;

  docShow: boolean;

  excelShow: boolean;

  audioShow: boolean;

  videoShow: boolean;

  //其他不能预览的
  otherShow: boolean;
}

interface FileStyle {
  height: string;

  width: string;
}

const props = withDefaults(
  defineProps<{
    visible: boolean;
    file: any;
  }>(),
  {
    visible: false
  }
);

const emits = defineEmits(['update:visible', 'addDocumentEmit']);

const file = computed(() => props.file);

// 文件信息
const fileMessage = reactive<FileMessage>({
  fileId: '',

  fileName: '',

  downloadUrl: '',

  imgShow: false,

  pdfShow: false,

  docShow: false,

  excelShow: false,

  audioShow: false,

  videoShow: false,

  //其他不能预览的
  otherShow: false
});

// const modalVisible = computed({
//   get() {
//     return props.visible;
//   },
//   set(visible: boolean) {
//     emits('update:visible', visible);
//   }
// });

const fileStyle = reactive<FileStyle>({
  height: window.innerHeight + 'px',
  width: '100%'
});

// 判断文件类型
const judgeFileType = () => {
  fileMessage.fileName = file.value.fileName;

  fileMessage.downloadUrl = file.value.downloadUrl;

  fileMessage.fileId = file.value.id;

  console.log(fileMessage.downloadUrl, 'fileMessage');

  if (
    fileMessage.fileName.endsWith('png') ||
    fileMessage.fileName.endsWith('jpg') ||
    fileMessage.fileName.endsWith('jpeg') ||
    fileMessage.fileName.endsWith('gif')
  ) {
    //图片
    fileMessage.imgShow = true;
  } else if (
    fileMessage.fileName.endsWith('docx') ||
    fileMessage.fileName.endsWith('doc') ||
    fileMessage.fileName.endsWith('pptx') ||
    fileMessage.fileName.endsWith('ppt') ||
    fileMessage.fileName.endsWith('txt') ||
    fileMessage.fileName.endsWith('xlsx') ||
    fileMessage.fileName.endsWith('xls')
  ) {
    fileMessage.docShow = true;
  } else if (fileMessage.fileName.endsWith('pdf')) {
    fileMessage.pdfShow = true;
  } else if (fileMessage.fileName.endsWith('mp3')) {
    fileMessage.audioShow = true;
  } else if (
    fileMessage.fileName.endsWith('mp4') ||
    fileMessage.fileName.endsWith('mkv')
  ) {
    fileMessage.videoShow = true;
  } else {
    // fileMessage.otherShow = true;
    emits('downLoadFile', fileMessage.fileId);
  }
};

judgeFileType();
// defineExpose({ judgeFileType });
// watchEffect(async () => {
//   if (modalVisible.value) await judgeFileType();
// });

// const handleCancel = () => {
//   modalVisible.value = true;
// };
</script>

<style scoped lang="less">
img {
  width: 50%;
}

audio {
  width: 100%;
}

// video {
//   width: 30%;
// }

.child {
  width: 100%;
  height: 100%;
  /* scrolling: no; */
  //    frameborder: 0;
  border: 0;
  /* marginwidth: 0; */
  /* marginheight: 0; */
}
</style>
